{% extends "base_generic.html" %}

{% block content %}
  <!-- 欢迎横幅 -->
  <div class="welcome-banner mb-5 text-center" data-aos="fade-up">
    <h1 class="display-4 fw-bold mb-4">欢迎来到本地图书馆</h1>
    <p class="lead mb-4">探索知识的海洋，开启阅读的旅程</p>
    <div class="d-flex justify-content-center gap-3">
      <a href="{% url 'books' %}" class="btn btn-primary">
        <i class="fas fa-book me-2"></i>浏览书籍
      </a>
      <a href="{% url 'authors' %}" class="btn btn-outline-secondary">
        <i class="fas fa-feather me-2"></i>查看作者
      </a>
    </div>
  </div>
  
  <!-- 统计信息卡片 -->
  <div class="row mb-5" data-aos="fade-up" data-aos-delay="100">
    <div class="col-md-3 mb-4">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <div class="stat-icon mb-3">
            <i class="fas fa-book fa-3x text-primary"></i>
          </div>
          <h5 class="card-title">图书总数</h5>
          <p class="card-text display-6 fw-bold">{{ num_books }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-4">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <div class="stat-icon mb-3">
            <i class="fas fa-copy fa-3x text-success"></i>
          </div>
          <h5 class="card-title">可借阅副本</h5>
          <p class="card-text display-6 fw-bold">{{ num_instances }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-4">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <div class="stat-icon mb-3">
            <i class="fas fa-check-circle fa-3x text-info"></i>
          </div>
          <h5 class="card-title">当前可用</h5>
          <p class="card-text display-6 fw-bold">{{ num_instances_available }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 mb-4">
      <div class="card text-center h-100 stat-card">
        <div class="card-body">
          <div class="stat-icon mb-3">
            <i class="fas fa-feather-alt fa-3x text-warning"></i>
          </div>
          <h5 class="card-title">作者总数</h5>
          <p class="card-text display-6 fw-bold">{{ num_authors }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 热门图书部分 -->
  <h2 class="section-title mb-4" data-aos="fade-up">
    <i class="fas fa-fire text-danger me-2"></i>热门图书
  </h2>
  
  <div class="row">
    <!-- 评分排行榜 -->
    <div class="col-md-6" data-aos="fade-right" data-aos-delay="100">
      <div class="card mb-4 ranking-card">
        <div class="card-header bg-primary text-white">
          <h3 class="h5 mb-0">
            <i class="fas fa-star me-2"></i>评分排行榜
          </h3>
        </div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush">
            {% for book in top_rated_books %}
              <li class="list-group-item d-flex justify-content-between align-items-center {% if forloop.counter <= 3 %}top-three{% endif %}">
                <div class="d-flex align-items-center">
                  <div class="ranking-number">{{ forloop.counter }}</div>
                  <a href="{{ book.get_absolute_url }}">{{ book.title }}</a>
                </div>
                <div class="rating">
                  {% for i in "12345" %}
                    {% if forloop.counter <= book.average_rating|floatformat:"0" %}
                      <i class="fa fa-star"></i>
                    {% elif forloop.counter <= book.average_rating|add:"0.5"|floatformat:"0" %}
                      <i class="fa fa-star-half-alt"></i>
                    {% else %}
                      <i class="fa fa-star text-muted"></i>
                    {% endif %}
                  {% endfor %}
                  <span class="ms-2 badge bg-warning text-dark">{{ book.average_rating|floatformat:1 }}</span>
                </div>
              </li>
            {% empty %}
              <li class="list-group-item text-center py-4">
                <i class="fas fa-exclamation-circle text-muted me-2"></i>暂无评分数据
              </li>
            {% endfor %}
          </ul>
        </div>
        <div class="card-footer text-center">
          <a href="{% url 'ranking' %}" class="btn btn-primary">
            <i class="fas fa-list me-2"></i>查看完整排行榜
          </a>
        </div>
      </div>
    </div>
    
    <!-- 借阅排行榜 -->
    <div class="col-md-6" data-aos="fade-left" data-aos-delay="200">
      <div class="card mb-4 ranking-card">
        <div class="card-header bg-success text-white">
          <h3 class="h5 mb-0">
            <i class="fas fa-book-reader me-2"></i>借阅排行榜
          </h3>
        </div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush">
            {% for book in top_borrowed_books %}
              <li class="list-group-item d-flex justify-content-between align-items-center {% if forloop.counter <= 3 %}top-three{% endif %}">
                <div class="d-flex align-items-center">
                  <div class="ranking-number">{{ forloop.counter }}</div>
                  <a href="{{ book.get_absolute_url }}">{{ book.title }}</a>
                </div>
                <span class="badge bg-success rounded-pill">
                  <i class="fas fa-book me-1"></i> {{ book.borrow_count }} 次
                </span>
              </li>
            {% empty %}
              <li class="list-group-item text-center py-4">
                <i class="fas fa-exclamation-circle text-muted me-2"></i>暂无借阅数据
              </li>
            {% endfor %}
          </ul>
        </div>
        <div class="card-footer text-center">
          <a href="{% url 'ranking' %}" class="btn btn-success">
            <i class="fas fa-list me-2"></i>查看完整排行榜
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 图书馆介绍 -->
  <div class="library-intro mt-5 p-4 rounded bg-light" data-aos="fade-up" data-aos-delay="300">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h3 class="mb-3">关于本地图书馆</h3>
        <p class="lead">本地图书馆是一个现代化的数字阅读平台，致力于为读者提供丰富的阅读资源和便捷的借阅体验。</p>
        <p>我们拥有丰富的藏书资源，涵盖文学、科技、艺术、历史等多个领域，满足不同读者的阅读需求。同时，我们还提供评分、评论、收藏等功能，帮助读者发现更多优质书籍。</p>
        <a href="#" class="btn btn-outline-primary mt-2">
          <i class="fas fa-info-circle me-2"></i>了解更多
        </a>
      </div>
      <div class="col-md-6 text-center">
        <i class="fas fa-book-reader fa-10x text-primary opacity-25"></i>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
<script>
  // 添加额外的动画效果
  document.addEventListener('DOMContentLoaded', function() {
    // 统计数字动画
    const statNumbers = document.querySelectorAll('.stat-card .display-6');
    statNumbers.forEach(number => {
      const finalValue = parseInt(number.textContent);
      let startValue = 0;
      const duration = 1500;
      const startTime = performance.now();
      
      function updateNumber(currentTime) {
        const elapsedTime = currentTime - startTime;
        if (elapsedTime < duration) {
          const progress = elapsedTime / duration;
          const currentValue = Math.round(progress * finalValue);
          number.textContent = currentValue;
          requestAnimationFrame(updateNumber);
        } else {
          number.textContent = finalValue;
        }
      }
      
      requestAnimationFrame(updateNumber);
    });
  });
</script>
{% endblock %}
